import React, { useState } from 'react';
import {Button, Input, Modal, Checkbox} from 'antd';
import Barcode from 'react-barcode';
const { TextArea } = Input;
const App = (props) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    React.useImperativeHandle(props.onRef, () => {
        return {
            showModal: showModal,
        };
    });
    return (
        <>
            <Modal title="绑定标本信息" width={1000} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <div>
                    <span>一维码扫描</span>
                    <div>
                        <Barcode  value='23456789012' />
                    </div>
                    <div>
                        条形码
                        <Input style={{width: '120px'}} />
                    </div>
                    <div>
                        实验号
                        <Input style={{width: '120px'}} />
                    </div>
                </div>
                <div>
                    <span>
                        备注
                    </span>
                    <div style={{marginLeft: '10px',marginTop: '6px'}}>
                        请把一维码放在条形框内
                    </div>
                </div>
            </Modal>
        </>
    );
};

export default App;
